<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar
        placeholder="搜索充电宝"
        radius="30"
        bgColor="#e1e1e1"
        @confirm="handleSearch"
      />
    </view>

<view class="" style="display: flex;justify-content: center;align-items: center;margin-top: 200rpx;flex-direction: column;" v-if="powerbankList.length == 0">
	<image src="/static/images/null.png" style="width: 430rpx;height: 300rpx;"></image>
	<view class="" style="color: #666;">
		暂无数据
	</view>
</view>
    <!-- 充电宝列表 -->
    <scroll-view class="powerbank-list" scroll-y v-else>
      <view 
        v-for="(item, index) in powerbankList"
        :key="index"
        class="powerbank-item"
        @click="handleDetails(item)"
      >
        <view class="device-info">
			<view class="status-value"><text class="name">设备昵称：</text><text class="value">{{ item.devicename }}</text></view>
            <view class="status-value"><text class="name">电量：</text><text class="value">{{ item.electric }}%</text></view>
            <view class="status-value"><text class="name">温度：</text><text class="value">{{ item.temperature }}%</text></view>
            <view class="status-value"><text class="name">湿度：</text><text class="value">{{ item.humidity }}%</text></view>
            <view class="status-value"><text class="name">电池健康度：</text><text class="value">{{ item.cell }}%</text></view>
        </view>
      </view>
	  
    </scroll-view>
	    <!-- 右下角按钮 -->
	    <view class="float-button" @click="handleAddPowerBank()">
	      <uni-icons type="plus" size="28" color="#fff"></uni-icons>
	    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onShow } from '@dcloudio/uni-app'
import {getFindDeviceByUid} from '@/api/common.js'

const powerbankList = ref([]);

const loadDeviceList = () => {
  const uid = uni.getStorageSync('userInfo')?.id;
  if (!uid) {
    uni.showToast({ title: '用户信息缺失', icon: 'none' });
    return;
  }

  getFindDeviceByUid({ uid })
    .then((res) => {
      if (res.code === 200) {
        powerbankList.value = res.data;
        console.log('设备列表更新:', res.data);
      } else {
        uni.showToast({ title: '获取设备失败', icon: 'none' });
      }
    })
    .catch((error) => {
      console.error('网络请求失败:', error);
    });
};


// 页面加载时获取数据（首次加载）
// onLoad(() => loadDeviceList ())
// 页面切换后需要更新数据		 onShow 生命周期重新加载设备列表
onShow(() => loadDeviceList ())

const handleSearch = (e) => {
  console.log('搜索内容：', e.value);
};


// 充电宝详情
const handleDetails = (item) => {
	const deviceData = encodeURIComponent(JSON.stringify(item));
	uni.navigateTo({
		url:`/pages/power_bank_details/power_bank_details?deviceData=${deviceData}`
	})
}

// 新增充电宝
const handleAddPowerBank = () =>{
	uni.navigateTo({
		url:`/pages/qrCode/index`
	})
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}
.uni-searchbar {
	padding: 0;
}
.search-bar {
  margin-bottom: 20rpx;
  // background: #e1e1e1;
  // border-radius: 100rpx;
}


.box {
    width: 100%;
    height: 400rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    border: 2px solid dodgerblue;
}
.item {
    box-sizing: border-box;
    padding: 10rpx;
    border-bottom: 1px solid #ccc;
}
button {
    margin-bottom: 20rpx;
}

.powerbank-list {
  .powerbank-item {
    background: #e1e1e1;
    border-radius: 24rpx;
    padding: 20rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
    transition: all 0.2s;

    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }	

    .device-info {
		flex: 1;
		color: #070707;
		.status-value {
			font-size: 26rpx;
			display: flex; 
			flex: 1;
			.name {
				display: block;
				flex: 1;
			}
			.value {
				flex: 1;
			}
		}
      // flex: 1;
	  // display: flex;
	  // flex-direction: column;
	  // align-content: space-around;
      
      // .device-name {
      //   font-size: 34rpx;
      //   color: #333;
      //   font-weight: 500;
      //   margin-bottom: 20rpx;
      //   // display: block;
      // }

  //     .status-grid {
  //       display: flex;
		
  //       grid-template-columns: repeat(3, 1fr);
  //       gap: 20rpx;

  //       .status-item {
  //         display: flex;
  //         align-items: center;

  //         .status-value {
  //           font-size: 28rpx;
  //           color: #666;
  //           margin-left: 10rpx;
  //         }
  //       }
  //     }
    }
  }
}
.float-button {
  position: fixed;
  right: 40rpx;
  bottom: 150rpx;
  width: 150rpx;
  height: 150rpx;
  background: #2197ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 12rpx rgba(33, 151, 239, 0.3);
  z-index: 999;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.9);
    opacity: 0.8;
  }
}
</style>